<template>
  <div class="container">
    <PcHeader></PcHeader>
    <PcBanner :bannerImgList="bannerImgList"></PcBanner>
    <div class="industryList" v-if="industryList && industryList.length > 0">
      <h3 class="title">行业解决方案</h3>
      <span class="index-model-line"></span>
      <ul class="select-me-box">
        <li
          class="select-me-item"
          v-for="(item, index) in industryList"
          :key="index"
          @click="showSolutionDetail(item)"
          :style="{ background: `url(${returnImg(item.indexImg)})` }"
          style="background-size: 100% 100%; background-repeat: no-repeat"
        >
          <h3>{{ item.indexTitle }}</h3>
          <p>{{ item.indexContent }}</p>
          <a href="javascript:;">查看详情</a>
        </li>
      </ul>
    </div>
    <!-- 2023-07-27 去掉【解决方案”】 -->
    <!-- <div class="solution">
      <h1 class="title">{{solutionName}}</h1>
      <ul class="sub-tab">
        <li
          :class="['tab-item', { 'active': activeIndex === index}]"
          v-for="(item, index) in solutionSubTitle"
          :key="index"
          @click="changeSolutionTab(index)"
        >
          <span>{{ item.indexName }}</span>
        </li>
      </ul>
      <ul class="child-tab" v-if="solutionSubTitle[activeIndex]">
        <li
          :class="['child-item', { 'active': subListIndex === childIndex }]"
          v-for="(child, childIndex) in solutionSubTitle[activeIndex].children"
          :key="childIndex"
          @click="changeSubListTab(childIndex)"
        >
          <img :src="returnImg(child.indexImg)" alt>
          <span>{{ child.indexName }}</span>
        </li>
      </ul>
      <div ref="articleBox" class="article-box" v-if="articleList && articleList.length>0">
        <div class="article">
          <h3 class="article-title">{{ articleList[0].indexTitle }}</h3>
          <p class="article-describe">{{ articleList[0].indexContent }}</p>
          <div
            class="showMoreButton"
            @click="showSolutionDetail(solutionSubTitle[activeIndex].children[subListIndex],solutionSubTitle[activeIndex])"
          >查看详情</div>
        </div>
        <img
          class="article-image"
          :src="returnImg(articleList[0].indexImg)"
          :alt="articleList[0].indexTitle"
        >
      </div>
    </div>-->
    <!-- 2023-07-27 全面、智能、精准、高效”模块】 -->
    <!-- <div class="comprehensive index-model-bgimg">
      <h3 class="title">{{comprehensive.indexName}}</h3>
      <span class="index-model-line"></span>
      <img :src="returnImg(comprehensive.indexImg)" :alt="comprehensive.indexName">
    </div>-->
    <!-- 公司动态 -->
    <div class="company-dynamics index-model-bgimg">
      <h3 class="title" v-if="dynamicsList">
        {{ dynamicsList.indexName }}
        <span class="showMore" @click="showMore">
          查看更多
          <el-icon>
            <right />
          </el-icon>
        </span>
      </h3>
      <span class="index-model-line"></span>
      <ul class="dynamics-box">
        <li
          class="dynamics-item"
          v-for="(item, index) in dynamicsList.children"
          :key="index"
        >
          <img v-if="index === 0" :src="returnImg(item.indexImg)" alt />
          <span class="dynamics-title" @click="toArticleDeetail(item)">
            <span class="title1">{{ item.indexTitle }}</span>
            <span class="date">{{ getMonth(item.createTime) }}</span>
          </span>

          <span class="dynamics-article">
            {{ item.indexName }}
            <a
              href="javascript:;"
              class="details"
              @click="toArticleDeetail(item)"
              >【详情】</a
            >
          </span>
        </li>
      </ul>
    </div>
    <div class="why-select-me">
      <h3 class="title">{{ selectMeList.indexTitle }}</h3>
      <span class="index-model-line"></span>
      <ul class="select-me-box">
        <li
          class="select-me-item"
          v-for="(item, index) in selectMeList.children"
          :key="index"
        >
          <img :src="returnImg(item.indexImg)" :alt="item.indexTitle" />
          <h3>{{ item.indexName }}</h3>
          <p>{{ item.indexContent }}</p>
        </li>
      </ul>
    </div>
    <div
      class="cooperate index-model-bgimg"
      @mouseenter="clearTimer"
      @mouseleave="selectChangeAutoplay"
    >
      <h3 class="title">
        现已服务客户<span
          style="font-size: 55px; display: inline-block; color: #c41919"
          >100+</span
        >
      </h3>
      <span class="partner-dis"
        >涵盖银行、保险、证券、其他金融行业、央企国企</span
      >
      <ul class="select-me-box">
        <li
          class="select-me-item"
          v-for="(item, index) in partnersList.list"
          :key="index"
          v-show="selectChangeIndex === index"
        >
          <span
            class="item-box"
            v-for="(items, indexs) in item.list"
            :key="indexs"
          >
            <img :src="returnImg(items.indexImg)" :alt="items.indexName" />
          </span>
        </li>
      </ul>
      <ul class="select-change-box">
        <li
          class="select-change-item"
          v-for="(item, index) in partnersList.list"
          :key="index"
          :class="selectChangeIndex === index ? 'active' : ''"
          @click="handleChangeSelectBox(index)"
        ></li>
      </ul>
    </div>

    <backTop />
    <PcFooter></PcFooter>
  </div>
</template>
<script>
import PcHeader from "@/components/PcHeader/index.vue";
import PcBanner from "@/components/PcBanner/index.vue";
import PcFooter from "@/components/PcFooter/index.vue";
import backTop from "@/components/BackTop/index.vue";

import { getHomeBanner, menuGetModuleContent } from "@/api/PC-Home";
export default {
  components: { PcHeader, PcBanner, PcFooter, backTop },
  metaInfo: {
    title: "领雁智远-智能时代的推动者",
    meta: [
      {
        name: "keywords",
        content: "关键词",
      },
      {
        name: "description",
        content: "棉农书",
      },
    ],
  },
  computed: {
    articleList() {
      let item = [];
      if (this.solutionSubTitle[this.activeIndex]) {
        item =
          this.solutionSubTitle[this.activeIndex].children[this.subListIndex]
            .children;
      }
      return item;
    },
  },
  data() {
    return {
      subList: [
        {
          id: 1,
          list: [
            {
              title: "AI智能平台",
              articleTitle: "解决方案一",
              article:
                "面向银行、保险、证券以及大型企业提供控（风险）、审（审计）、报（监管报送）多层级的风控体系和系列产品。对金融机构风险提供完整的管理与监控手段，将风控业务与技术高度融合，提供准确深入的数据分析能力，形成完整的智能风控体系，打造安全高效的专家级系统，实现监管沟通、风险管理与监控。",
              image: "u7.png",
              titleImg: "tabone.png",
            },
            {
              title: "智能风控",
              articleTitle: "解决方案二",
              article:
                "面向银行、保险、证券以及大型企业提供控（风险）、审（审计）、报（监管报送）多层级的风控体系和系列产品。对金融机构风险提供完整的管理与监控手段，将风控业务与技术高度融合，提供准确深入的数据分析能力，形成完整的智能风控体系，打造安全高效的专家级系统，实现监管沟通、风险管理与监控。",
              image: "u8.png",
              titleImg: "tabone.png",
            },
            {
              title: "方案名称一",
              articleTitle: "解决方案三",
              article:
                "面向银行、保险、证券以及大型企业提供控（风险）、审（审计）、报（监管报送）多层级的风控体系和系列产品。对金融机构风险提供完整的管理与监控手段，将风控业务与技术高度融合，提供准确深入的数据分析能力，形成完整的智能风控体系，打造安全高效的专家级系统，实现监管沟通、风险管理与监控。",
              image: "u7.png",
              titleImg: "tabone.png",
            },
            {
              title: "方案名称一",
              articleTitle: "解决方案四",
              article:
                "面向银行、保险、证券以及大型企业提供控（风险）、审（审计）、报（监管报送）多层级的风控体系和系列产品。对金融机构风险提供完整的管理与监控手段，将风控业务与技术高度融合，提供准确深入的数据分析能力，形成完整的智能风控体系，打造安全高效的专家级系统，实现监管沟通、风险管理与监控。",
              image: "u8.png",
              titleImg: "tabone.png",
            },
          ],
        },
        {
          id: 2,
          list: [
            {
              title: "AI智能平台",
              articleTitle: "解决方案一",
              article:
                "面向银行、保险、证券以及大型企业提供控（风险）、审（审计）、报（监管报送）多层级的风控体系和系列产品。对金融机构风险提供完整的管理与监控手段，将风控业务与技术高度融合，提供准确深入的数据分析能力，形成完整的智能风控体系，打造安全高效的专家级系统，实现监管沟通、风险管理与监控。",
              image: "u7.png",
              titleImg: "tabone.png",
            },
            {
              title: "智能风控",
              articleTitle: "解决方案二",
              article:
                "面向银行、保险、证券以及大型企业提供控（风险）、审（审计）、报（监管报送）多层级的风控体系和系列产品。对金融机构风险提供完整的管理与监控手段，将风控业务与技术高度融合，提供准确深入的数据分析能力，形成完整的智能风控体系，打造安全高效的专家级系统，实现监管沟通、风险管理与监控。",
              image: "u8.png",
              titleImg: "tabone.png",
            },
            {
              title: "方案名称一",
              articleTitle: "解决方案三",
              article:
                "面向银行、保险、证券以及大型企业提供控（风险）、审（审计）、报（监管报送）多层级的风控体系和系列产品。对金融机构风险提供完整的管理与监控手段，将风控业务与技术高度融合，提供准确深入的数据分析能力，形成完整的智能风控体系，打造安全高效的专家级系统，实现监管沟通、风险管理与监控。",
              image: "u7.png",
              titleImg: "tabone.png",
            },
          ],
        },
        {
          id: 3,
          list: [
            {
              title: "AI智能平台",
              articleTitle: "证券一",
              article:
                "面向银行、保险、证券以及大型企业提供控（风险）、审（审计）、报（监管报送）多层级的风控体系和系列产品。对金融机构风险提供完整的管理与监控手段，将风控业务与技术高度融合，提供准确深入的数据分析能力，形成完整的智能风控体系，打造安全高效的专家级系统，实现监管沟通、风险管理与监控。",
              image: "u7.png",
              titleImg: "tabone.png",
            },
            {
              title: "智能风控",
              articleTitle: "证券二",
              article:
                "面向银行、保险、证券以及大型企业提供控（风险）、审（审计）、报（监管报送）多层级的风控体系和系列产品。对金融机构风险提供完整的管理与监控手段，将风控业务与技术高度融合，提供准确深入的数据分析能力，形成完整的智能风控体系，打造安全高效的专家级系统，实现监管沟通、风险管理与监控。",
              image: "u8.png",
              titleImg: "tabone.png",
            },
            {
              title: "方案名称一",
              articleTitle: "证券三",
              article:
                "面向银行、保险、证券以及大型企业提供控（风险）、审（审计）、报（监管报送）多层级的风控体系和系列产品。对金融机构风险提供完整的管理与监控手段，将风控业务与技术高度融合，提供准确深入的数据分析能力，形成完整的智能风控体系，打造安全高效的专家级系统，实现监管沟通、风险管理与监控。",
              image: "u7.png",
              titleImg: "tabone.png",
            },
          ],
        },
        {
          id: 4,
          list: [
            {
              title: "AI智能平台",
              articleTitle: "企业一",
              article:
                "面向银行、保险、证券以及大型企业提供控（风险）、审（审计）、报（监管报送）多层级的风控体系和系列产品。对金融机构风险提供完整的管理与监控手段，将风控业务与技术高度融合，提供准确深入的数据分析能力，形成完整的智能风控体系，打造安全高效的专家级系统，实现监管沟通、风险管理与监控。",
              image: "u7.png",
              titleImg: "tabone.png",
            },
            {
              title: "智能风控",
              articleTitle: "企业二",
              article:
                "面向银行、保险、证券以及大型企业提供控（风险）、审（审计）、报（监管报送）多层级的风控体系和系列产品。对金融机构风险提供完整的管理与监控手段，将风控业务与技术高度融合，提供准确深入的数据分析能力，形成完整的智能风控体系，打造安全高效的专家级系统，实现监管沟通、风险管理与监控。",
              image: "u8.png",
              titleImg: "tabone.png",
            },
          ],
        },
      ],
      solutionSubTitle: [],
      activeIndex: 0,
      subListIndex: 0,
      subListId: 1,
      selectChangeIndex: 0,
      partnersList: {},
      timer: null,
      dynamicsList: {},
      selectMeList: {},
      bannerImgList: [],
      comprehensive: {},
      solutionName: "",
      industryList: [],
    };
  },
  mounted() {
    this.getHomeBanner();
    this.getTradeManagement();
    // this.pushThreeDropImg()
    this.selectChangeAutoplay();
  },
  methods: {
    getHomeBanner() {
      getHomeBanner().then((res) => {
        let data = res.data;
        data.map((item) => {
          if (item.id === "101") {
            this.bannerImgList = item.children;
          }
          if (item.id === "102") {
            this.solutionSubTitle = item.children;
            this.solutionName = item.indexName;
          }

          if (item.id === "103") {
            // 全面 精准
            this.comprehensive.indexName = item.children[0].indexName;
            this.comprehensive.indexImg = item.children[0].indexImg;
          }
          if (item.id === "104") {
            // 为什么选择我们
            this.selectMeList = item;
          }
          if (item.id === "105") {
            // 合作客户
            this.partnersList = item;
            this.partnersList.list = [];
            for (var i = 0; i < item.children.length; i += 15) {
              this.partnersList.list.push({
                id: item.children[i].id,
                list: item.children.slice(i, i + 15),
              });
            }
          }
          if (item.id === "106") {
            // 合作客户
            this.dynamicsList = item;
          }
        });
      });
    },
    returnImg(url) {
      if (url) {
        return process.env.VUE_APP_URL + "/" + url;
      }
    },
    changeSolutionTab(index) {
      this.activeIndex = index;
      this.subListIndex = 0;
    },
    changeSubListTab(index) {
      this.subListIndex = index;
    },
    handleChangeSelectBox(index) {
      this.selectChangeIndex = index;
    },
    // pushThreeDropImg() {
    //     this.partnersList.map((item) => {
    //         if (item.list.length === 14) {
    //             item.list.push("tabone.png")
    //         }
    //     })
    // },
    selectChangeAutoplay() {
      this.timer = setInterval(() => {
        this.selectChangeIndex++;
        if (this.selectChangeIndex >= this.partnersList.list.length) {
          this.selectChangeIndex = 0;
        }
      }, 3000);
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    showMore() {
      this.$router.push("/businessmovement");
    },
    toArticleDeetail(item) {
      // let route = this.$router.push({path:'/articleDetail',query:{articleId:item.id}})
      const routes = this.$router.resolve({
        path: "/articleDetail",
        query: { articleId: item.id, parentId: this.defaultId },
      });
      window.open(routes.href, "_blank");
    },
    showSolutionDetail(item) {
      this.$router.push({
        path: "/solution",
        query: { id: item.id },
      });
    },
    // 获取行业
    getTradeManagement() {
      let param = {
        id: 201,
      };
      menuGetModuleContent(param).then((res) => {
        this.industryList = res.data;
        this.industryId = res.data[0].id;
      });
    },
    getMonth(timestamp) {
      if (!timestamp) return;
      timestamp = timestamp.replace("/-/g", "/");
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear();
      let M =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1,
        D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + "-" + M + "-" + D;
    },
  },
};
</script>
<style scoped lang="scss">
.industryList {
  width: 100%;
  height: 5.485rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  .select-me-box {
    width: 13.714rem;
    height: 2.285rem;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .select-me-item {
      width: 3.29rem;
      height: 100%;
      // background: url("../../assets/img/bank-bg.png") no-repeat;
      // background-size: contain;
      box-shadow: 0 8px 0.32rem 0 rgba(9, 52, 180, 0.05);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
      margin-bottom: 0.182rem;
      margin-right: 0.182rem;
      border-radius: 8px;
      padding: 0.285rem;
      box-sizing: border-box;
      cursor: pointer;
      // &:nth-of-type(2) {
      //   background: url("../../assets/img/insurance.png") no-repeat;
      //   background-size: contain;
      // }
      // &:nth-of-type(3) {
      //   background: url("../../assets/img/security.png") no-repeat;
      //   background-size: contain;
      // }
      &:nth-of-type(4) {
        // background: url("../../assets/img/other.png") no-repeat;
        // background-size: contain;
        margin-right: 0px;
      }
      &:hover {
        box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        // filter: blur(10px);//背景图模糊效果
        transform: scale(1.1); //默认缩放1.5倍
        // opacity: 0;//默认透明
        transition: all 0.5s; //动画时间
      }
      h3 {
        font-size: 0.274rem;
        color: #ffffff;
        line-height: 0.16rem;
        margin-bottom: 0.182rem;
        // text-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
      }
      p {
        font-size: 0.16rem;
        color: #ffffff;
        line-height: 0.228rem;
        text-align: left;
        height: 0.914rem;
        // margin-bottom: 0.64rem;
        // text-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
      }
      a {
        font-size: 0.16rem;
        color: #ffffff;
        line-height: 0.16rem;
        border-top: 1px solid #d8d8d8;
        padding-top: 0.137rem;
        box-sizing: border-box;
        // text-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
      }
    }
  }
}
.solution {
  width: 100%;
  height: 8.777rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .sub-tab {
    width: auto;
    height: 0.32rem;
    margin: 0 auto;
    display: inline-block;
    border: 1px solid #1790ff;
    border-radius: 4px;
    margin-bottom: 0.73rem;
    margin-top: 0.228rem;
    .tab-item {
      width: 0.822rem;
      height: 100%;
      font-size: 0.16rem;
      color: #1790ff;
      text-align: center;
      line-height: 0.32rem;
      float: left;
      border-right: 1px solid #1790ff;
      cursor: pointer;

      &.active {
        background: #1790ff;
        color: #fff;
      }

      &:hover {
        background: #1790ff;
        color: #fff;
      }

      &:last-child {
        border-right: 0;
      }
    }
  }

  .child-tab {
    width: 13.714rem;
    height: 1.577rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    border-bottom: 4px solid #d3e3f0;
    border-radius: 4px;
    box-sizing: border-box;

    .child-item {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      cursor: pointer;

      &.active {
        &:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 4px;
          bottom: -4px;
          background: #1790ff;
        }
      }

      &:hover {
        &:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 4px;
          bottom: -4px;
          background: #1790ff;
        }
      }

      img {
        width: 0.857rem;
        height: 0.857rem;
        margin-bottom: 0.114rem;
      }

      span {
        font-size: 0.205rem;
        color: #323233;
        letter-spacing: 0;
        text-align: center;
      }
    }
  }

  .article-box {
    width: 13.714rem;
    height: 3.1rem;
    margin: 0 auto;
    margin-top: 0.457rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

    .article {
      width: 6rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .article-title {
        font-size: 0.274rem;
        color: #000000;
        letter-spacing: -0.22px;
        text-align: left;
        line-height: 0.32rem;
      }

      .article-describe {
        font-size: 0.182rem;
        color: #000000;
        letter-spacing: -0.15px;
        text-align: left;
        line-height: 0.32rem;
        margin-top: 0.274rem;
      }

      .showMoreButton {
        width: 1.097rem;
        height: 0.365rem;
        text-align: center;
        line-height: 0.365rem;
        cursor: pointer;
        color: #fff;
        background: #1790ff;
        border-radius: 4px;
        margin-top: 0.297rem;
        font-size: 0.16rem;
      }
    }

    .article-image {
      width: 4.342rem;
      height: 3.085rem;
      margin-left: 0.982rem;
    }
  }
}

.comprehensive {
  width: 100%;
  height: 8.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    width: 13.714rem;
    height: 5.485rem;
    margin-top: 0.64rem;
  }
}

.why-select-me {
  width: 100%;
  height: 9.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;

  .select-me-box {
    width: 13.714rem;
    height: 5rem;
    margin-top: 0.9rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .select-me-item {
      width: 3.2rem;
      height: 100%;
      background: #F7F8FB;
      background-size: 100% 100%;
      // border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 0 10px rgba(0, 17, 67, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      // padding: 0.4rem;
      box-sizing: border-box;
      transform: skew(-20deg) translateY(0.3rem);
      border: 1px solid #1790ff;
        box-sizing: border-box;
      &:nth-of-type(2n) {
        background: #FFE0DD;
        background-size: 100% 100%;
        transform: skew(-20deg) translateY(-0.3rem);
      }
      &:hover {
        box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
      }
      img {
        width: 130%;
        height: 2.49rem;
        transform: skew(20deg);
      }
      h3 {
        font-family: MicrosoftYaHei-Bold;
        font-size: 0.32rem;
        color: #323233;
        text-align: center;
        line-height: 0.32rem;
        margin-top: 0.434rem;
        transform: skew(20deg);
      }
      p {
        font-family: MicrosoftYaHei;
        font-size: 0.205rem;
        color: #323233;
        text-align: left;
        line-height: 0.411rem;
        margin-top: 0.411rem;
        padding: 0 0.4rem 0 0.7rem;
        transform: skew(20deg);
      }
    }
  }
}

.cooperate {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  .partner-dis {
    font-size: 0.24rem;
    color: #909399;
  }
  .select-me-box {
    width: 13.714rem;
    height: 3.611rem;
    margin-top: 0.64rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .select-me-item {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .item-box {
        width: 2.422rem;
        height: 0.822rem;
        background: #ffffff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 0 0.228rem;
        box-sizing: border-box;
        margin-right: 0.4rem;

        &:nth-child(5n) {
          margin-right: 0;
        }

        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }

  .select-change-box {
    display: flex;
    width: auto;
    height: auto;
    margin-top: 0.548rem;
    margin-bottom: 0.548rem;

    .select-change-item {
      width: 0.457rem;
      height: 4px;
      background: rgba(23, 144, 255, 0.2);
      border-radius: 2px;
      margin-right: 8px;
      cursor: pointer;

      &.active {
        background: rgba(23, 144, 255, 1);
      }

      &:hover {
        background: rgba(23, 144, 255, 1);
      }
    }
  }
}

.company-dynamics {
  width: 100%;
  height: 8.8rem;
  // background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;

  .dynamics-box {
    width: 13.714rem;
    height: 5.3rem;
    margin-top: 0.64rem;
    position: relative;
    overflow: hidden;
    .dynamics-item {
      width: calc(50% - 8px);
      height: 1.645rem;
      position: absolute;
      right: 0;
      padding: 0.274rem;
      background: #fff;
      display: flex;
      flex-direction: column;
      text-align: left;
      box-sizing: border-box;
      border-radius: 8px;
      &:first-child {
        left: 0;
        height: 100%;
        top: 0;
        .dynamics-title {
          margin-top: 0.274rem;
        }
      }
      &:nth-child(2) {
        top: 0;
        height: 1.645rem;
      }
      &:nth-child(3) {
        top: 1.828rem;
        height: 1.645rem;
      }
      &:hover {
        box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
      }
      &:last-child {
        margin-right: 0;
        top: 3.657rem;
      }

      img {
        width: 100%;
        height: 3.29rem;
        border-radius: 4px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      .dynamics-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        cursor: pointer;
        &:hover {
          color: #1790ff;
        }
        .title1 {
          font-size: 0.205rem;
          color: #323233;
          letter-spacing: 0;
          line-height: 0.225rem;
          font-weight: 700;
          width: 5rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .date {
          font-size: 0.18rem;
          color: #909399;
        }
      }

      .dynamics-article {
        font-size: 0.182rem;
        line-height: 0.275rem;
        color: #909399;
        text-align: justify;
        margin: 0.182rem 0 0 0;
        .details {
          line-height: 0.16rem;
        }
      }
    }
  }
}

.title {
  width: 13.714rem;
  font-size: 0.457rem;
  color: #323233;
  letter-spacing: 0;
  text-align: center;
  margin-top: 1.097rem;
  position: relative;
}

.details {
  font-size: 0.16rem;
  color: #1790ff;
  letter-spacing: 0;
  line-height: 0.365rem;
  text-decoration: none;
}
.showMore {
  font-size: 0.182rem;
  color: #909399;
  letter-spacing: 0;
  line-height: 0.205rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  &:hover {
    color: #1790ff;
  }
  .el-icon {
    margin-left: 8px;
  }
}
@media only screen and (max-device-width: 768px) {
  .industryList {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f1f3f6;
    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 0.57rem;
      padding: 0 0.228rem;
      box-sizing: border-box;
      .select-me-item {
        width: 48%;
        height: 100%;
        background: url("../../assets/img/bank-bg.png") no-repeat;
        background-size: 100%;
        box-shadow: 0 8px 0.32rem 0 rgba(9, 52, 180, 0.05);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 0.182rem;
        margin-right: 0;
        border-radius: 8px;
        padding: 0.274rem;
        box-sizing: border-box;
        cursor: pointer;
        &:nth-of-type(2) {
          background: url("../../assets/img/insurance.png") no-repeat;
          background-size: 100%;
        }
        &:nth-of-type(3) {
          background: url("../../assets/img/security.png") no-repeat;
          background-size: 100%;
        }
        &:nth-of-type(4) {
          background: url("../../assets/img/other.png") no-repeat;
          background-size: 100%;
          margin-right: 0px;
        }
        &:hover {
          box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        }
        h3 {
          font-size: 0.274rem;
          color: #ffffff;
          line-height: 14px;
          margin-bottom: 16px;
        }
        p {
          font-size: 0.16rem;
          color: #ffffff;
          line-height: 0.228rem;
          text-align: left;
          margin-bottom: 0.64rem;
        }
        a {
          font-size: 0.16rem;
          color: #ffffff;
          line-height: 0.16rem;
          border-top: 1px solid #d8d8d8;
          padding-top: 0.137rem;
          box-sizing: border-box;
        }
      }
    }
  }
  .solution {
    width: 100%;
    height: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    .child-tab {
      width: 100%;
      height: 1.577rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      border-bottom: 4px solid #d3e3f0;
      border-radius: 4px;
      box-sizing: border-box;

      .child-item {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        cursor: pointer;

        &.active {
          &:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 4px;
            bottom: -4px;
            background: #1790ff;
          }
        }

        &:hover {
          &:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 4px;
            bottom: -4px;
            background: #1790ff;
          }
        }

        img {
          width: 0.857rem;
          height: 0.857rem;
          margin-bottom: 10px;
        }

        span {
          font-size: 0.16rem;
          color: #323233;
          letter-spacing: 0;
          text-align: center;
        }
      }
    }

    .article-box {
      width: 100%;
      height: auto;
      margin: 0 auto;
      margin-top: 0.457rem;
      margin-bottom: 0.457rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 0 0.228rem;
      box-sizing: border-box;
      .article {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .article-title {
          font-size: 0.274rem;
          color: #000000;
          letter-spacing: -0.22px;
          text-align: left;
          line-height: 0.32rem;
        }

        .article-describe {
          font-size: 0.182rem;
          color: #000000;
          letter-spacing: -0.15px;
          text-align: left;
          line-height: 0.32rem;
          margin-top: 0.274rem;
        }

        .showMoreButton {
          width: 1.097rem;
          height: 0.365rem;
          text-align: center;
          line-height: 0.365rem;
          cursor: pointer;
          color: #fff;
          background: #1790ff;
          border-radius: 4px;
          margin-top: 0.297rem;
          margin-bottom: 0.297rem;
          font-size: 0.16rem;
        }
      }

      .article-image {
        width: 100%;
        height: 3.985rem;
        margin-left: 0px;
      }
    }
  }
  .comprehensive {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.228rem;
    box-sizing: border-box;
    img {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      margin-bottom: 0.64rem;
    }
  }
  .why-select-me {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0 0.228rem;
      box-sizing: border-box;
      align-items: center;
      .select-me-item {
        width: 4.114rem;
        height: 100%;
        background: url("../../assets/img/bg-1.png") no-repeat 100% 100%;
        background-size: 100% 100%;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0, 17, 67, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.4rem;
        box-sizing: border-box;
        transform: skew(0) translateY(0);
        margin-bottom: 0.3rem;
        &:nth-of-type(2n) {
          background: url("../../assets/img/bg-2.png") no-repeat 100% 100%;
          background-size: 100% 100%;
          transform: skew(0) translateY(0);
        }
        &:nth-of-type(3n) {
          background: url("../../assets/img/bg-3.png") no-repeat 100% 100%;
          background-size: 100% 100%;
          transform: skew(0) translateY(0);
        }
        &:hover {
          box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
          border: 1px solid #1790ff;
          box-sizing: border-box;
          transform: skew(0) translateY(0);
        }
        img {
          width: 0.914rem;
          height: 0.914rem;
          transform: skew(0) translateY(0);
        }
        h3 {
          font-family: MicrosoftYaHei-Bold;
          font-size: 0.32rem;
          color: #323233;
          text-align: center;
          line-height: 0.32rem;
          margin-top: 0.434rem;
          transform: skew(0) translateY(0);
        }
        p {
          font-family: MicrosoftYaHei;
          font-size: 0.205rem;
          color: #323233;
          text-align: left;
          line-height: 0.411rem;
          margin-top: 0.411rem;
          transform: skew(0) translateY(0);
        }
      }
    }
  }
  .cooperate {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .select-me-box {
      width: 100%;
      height: 10rem;
      margin-top: 0.64rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.228rem;
      box-sizing: border-box;
      .select-me-item {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        .item-box {
          width: 48%;
          height: 1rem;
          margin-bottom: 0rem;
          margin-right: 0;
        }
      }
    }

    .select-change-box {
      margin-bottom: 0.548rem;
    }
  }
  .company-dynamics {
    width: 100%;
    height: auto;
    // background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    .showMore {
      right: 0.228rem;
    }
    .dynamics-box {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      margin-bottom: 0.64rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.228rem;
      box-sizing: border-box;
      .dynamics-item {
        margin-bottom: 0.228rem;
        position: sticky;
        height: 6rem;
        width: 100%;
        margin-bottom: 0.17rem;
        &:first-child {
          .dynamics-title {
            margin-top: 0.274rem;
          }
        }
        &:nth-child(2) {
          height: 2rem;
        }
        &:nth-child(3) {
          height: 2rem;
        }
        &:last-child {
          height: 2rem;
        }
      }
    }
  }
  .title {
    width: 100%;
  }
}
</style>